<template>
    <div class="life-radio">
        <div class="select-box">
            <div v-if="selected">
                <span @click="select" style="cursor: pointer;font-size: 14px">选择</span> 
            </div>
            <div v-else>
                <el-checkbox v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
                <el-link class="delete" type="danger" :underline="false" @click="deleted">删除</el-link>
            </div>
        </div>
        <ul class="radio-list">
            <!-- <li>
                <img src="./collection.png" alt="" srcset="">
                <span>我的收藏(15首)</span>
            </li> -->
            <li v-for="item in radioList" :key="item.id">
                <img :src="item.image" alt="" srcset="">
                <span>{{ item.radioName }}</span>
                <!-- <p>编辑</p> -->
                <el-checkbox v-if="showCheckbox" v-model="item.isChecked" @change="statusChange"></el-checkbox>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'Radio',
    data() {
        return {
            selected: true,
            checkAll: false,
            showCheckbox: false,
            radioList: [
                { id: 1, radioName: '欧丽娟·醉美古诗词', image: require('./radio1.png'), isChecked: false },
                { id: 2, radioName: '王巨星的电台', image: require('./radio2.png'), isChecked: false },
                { id: 3, radioName: '蕊希电台', image: require('./radio3.png'), isChecked: false },
                { id: 4, radioName: '胖子虎', image: require('./radio4.png'), isChecked: false }
            ]
        }
    },
    methods: {
        select(){
            this.selected = false
            this.showCheckbox = true
        },
        handleCheckAllChange(){
            
        },
        deleted(){
            this.selected = true
            this.showCheckbox = false
        },
        statusChange(){

        }
    }
}
</script>

<style lang="scss" scoped>
.life-radio{
    .select-box{
        height: 40px;
        
    }
    .radio-list{
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;
        li{
            position: relative;
            width: 184px;
            height: 176px;
            padding: 8px 9px 11px 9px;
            box-sizing: border-box;
            padding-right: 12px;
            img{
                width: 100%;
            }
            span{
                position: absolute;
                color: #ffffff;
                font-size: 14px;
                left: 18px;
                top: 18px;
            }
            
            .el-checkbox{
                position: absolute;
                right: 18px;
                top: 18px;
            }
        }
    }
}
</style>
